<!-- Main wrapper - style you can find in pages.scss -->
<!-- ============================================================== -->
<div id="main-wrapper">
    <!-- ============================================================== -->
    <!-- Topbar header - style you can find in pages.scss -->
    <!-- ============================================================== -->

    <!-- ============================================================== -->
    <!-- End Topbar header -->
    <header class="topbar">
        <!-- This div with height 5px is a placeholder for progress bar. -->
        <!-- Without this placeholder the layout will slightly change when progress bar is displayed or hidden.  -->
        <div class="progress-bar-container">
            <mat-progress-bar [hidden]="!hasPendingRequest" mode="indeterminate"></mat-progress-bar>
        </div>
        <op-topbar *ngIf="isAuthenticated" [hidden]="isScreenLocked"></op-topbar>
    </header>
    <!-- ============================================================== -->
    <!-- ============================================================== -->
    <!-- Left Sidebar - style you can find in sidebar.scss  -->
    <!-- ============================================================== -->
    <op-sidebar *ngIf="isAuthenticated" [hidden]="isScreenLocked"></op-sidebar>
    <!-- ============================================================== -->
    <!-- End Left Sidebar - style you can find in sidebar.scss  -->
    <!-- ============================================================== -->
    <!-- ============================================================== -->
    <!-- Page wrapper  -->
    <!-- ============================================================== -->
    <div [class.page-wrapper]="isAuthenticated && !isScreenLocked">
        <!-- ============================================================== -->
        <!-- Container fluid  -->
        <!-- ============================================================== -->
        <div [class.container-fluid]="isAuthenticated && !isScreenLocked">
            <!-- ============================================================== -->
            <!-- Bread crumb and right sidebar toggle -->
            <!-- ============================================================== -->
            <op-breadcrumb *ngIf="isAuthenticated" [hidden]="isScreenLocked"></op-breadcrumb>
            <!-- ============================================================== -->
            <!-- End Bread crumb and right sidebar toggle -->
            <!-- ============================================================== -->
            <!-- ============================================================== -->
            <!-- Start Main Page Content -->
            <!-- ============================================================== -->
            <div [hidden]="isScreenLocked">
                <button type="button" class="btn btn-info" (click)="login()">Login</button>
                <button type="button" class="btn btn-info" (click)="logout()">Logout</button>
                <button type="button" class="btn btn-info" (click)="getPublic()">Get Public</button>
                <button type="button" class="btn btn-info" (click)="getRestricted()">Get Restricted</button>
                <button type="button" class="btn btn-info" (click)="push()">Push</button>
                <button type="button" class="btn btn-info" (click)="disconnect()">Disconnect</button>
                <button type="button" class="btn btn-info" (click)="sendMessage()">Send Message</button>
                <router-outlet></router-outlet>

                <!-- You decide to give users a way to contact the crisis center. When a user clicks a "Contact" button, 
                you want to display a message in a popup view.

                The popup should stay open, even when switching between pages in the application, until the user closes it 
                by sending the message or canceling. Clearly you can't put the popup in the same outlet as the other pages. -->

                <!-- That's where a popup will go, once you learn how to route a popup component to it. -->

                <!-- Named outlets are the targets of secondary routes.

                Secondary routes look like primary routes and you configure them the same way. They differ in a few key respects.

                They are independent of each other.
                They work in combination with other routes.
                They are displayed in named outlets. -->
                <router-outlet name="popup"></router-outlet>
            </div>
            <!-- ============================================================== -->
            <!-- End Main Page Content -->
            <!-- ============================================================== -->
            <!-- ============================================================== -->
            <!-- Start Lock Screen -->
            <!-- ============================================================== -->
            <op-lock-screen [hidden]="!isScreenLocked"></op-lock-screen>
            <!-- ============================================================== -->
            <!-- End Lock Screen -->
            <!-- ============================================================== -->
        </div>
        <!-- ============================================================== -->
        <!-- End Container fluid  -->
        <!-- ============================================================== -->
        <!-- ============================================================== -->
        <!-- footer -->
        <!-- ============================================================== -->
        <footer class="footer" *ngIf="isAuthenticated" [hidden]="isScreenLocked">
            © 2018 Open News Team
        </footer>
        <!-- ============================================================== -->
        <!-- End footer -->
        <!-- ============================================================== -->
    </div>
    <!-- ============================================================== -->
    <!-- End Page wrapper  -->
    <!-- ============================================================== -->
</div>
<!-- ============================================================== -->
<!-- End Wrapper -->